<template>
	<view class="goshop-password-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-password-form">
			<u--form
						labelPosition="left"
						:model="form"
						:rules="rules"
						ref="form"
				>
						<u-form-item
								:label="mailText"
								prop="mail"
								borderBottom
								labelWidth="80"
						>
							<u--input
									v-model="form.mail"
									:placeholder="fillmailText"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
							:label="captchaText"
							prop="code"
							labelWidth="80"
							borderBottom
						>
							<u--input
								v-model="form.code"
								border="none"
								:placeholder="fillcaptchaText"
							></u--input>
							<u-button
								slot="right"
								@tap="getCode"
								:text="tips"
								type="error"
								size="mini"
								:disabled="disabled"
							></u-button>
						</u-form-item>
						<u-form-item
							:label="newpasswordText"
							prop="newPassword"
							labelWidth="80"
							borderBottom
						>
							<u--input
								v-model="form.newPassword"
								border="none"
								password
								:placeholder="fillnewpasswordText"
							></u--input>
						</u-form-item>
						<u-form-item
							:label="confirmpasswordText"
							prop="confirmPassword"
							labelWidth="80"
							borderBottom
						>
							<u--input
								v-model="form.confirmPassword"
								border="none"
								password
								:placeholder="fillconfirmpasswordText"
							></u--input>
						</u-form-item>
				</u--form>
		</view>
		<u-code
			ref="uCode"
			:changeText="changeText"
			:startText="startText"
			:endText="endText"
			@change="codeChange"
			seconds="20"
			@start="disabled = true"
			@end="disabled = false"
		></u-code>
		<view class="goshop-password-footer u-m-t-20">
			<u-button type="error" @click="submit" :text="submitText"></u-button>
		</view>
	</view>
</template>

<script>
	import {updatePasswordEmail,sendEmailCode} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js'
	export default {
		data() {
			return {
				tips: '',
				disabled: false,
				changeText:'',
				startText:'',
				endText:'',
				locale:'',
				form: {
					mail: '',
					code:'',
					newPassword:'',
					confirmPassword:''
				},
				rules:{
					mail: {
						type: 'string',
						required: true,
						message: this.fillmailText,
						trigger: ['blur', 'change']
					},
					newPassword: [
						{
							required: true,
							message: this.ruleFillpasswordText,
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: this.ruleFillpassworderrText,
							trigger: ['change','blur'],
						}
					],
					confirmPassword: [
						{
							required: true,
							message: this.ruleFilltwopasswordText,
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.newPassword;
							},
							message: this.ruleFilltwopassworderrText,
							trigger: ['change','blur'],
						}
					],
				},
				mailText:'',
				fillmailText:'',
				captchaText:'',
				fillcaptchaText:'',
				newpasswordText:'',
				fillnewpasswordText:'',
				confirmpasswordText:'',
				fillconfirmpasswordText:'',
				submitText:'',
				ruleFillpasswordText:'',
				ruleFillpassworderrText:'',
				ruleFilltwopasswordText:'',
				ruleFilltwopassworderrText:'',
				updatesuccessText:'',
				updateerrorText:'',
				captchasendText:'',
				captchaerrorText:'',
				countdownText:'',
			};
		},
		onShow(){
		   this.locale = this.$i18n.locale;
		   this.form.locale = this.$i18n.locale;
		   this.refresh();
		},
		methods:{
			refresh(){
				this.mailText = this.$t('password.mail.text');
				this.fillmailText = this.$t('password.fillmail.text');
				this.captchaText = this.$t('password.captcha.text');
				this.fillcaptchaText = this.$t('password.fillcaptcha.text');
				this.newpasswordText = this.$t('password.newpassword.text');
				this.fillnewpasswordText = this.$t('password.fillnewpassword.text');
				this.confirmpasswordText = this.$t('password.confirmpassword.text');
				this.fillconfirmpasswordText = this.$t('password.fillconfirmpassword.text');
				this.submitText = this.$t('common.submit.text');
				this.ruleFillpasswordText = this.$t('password.rules.fillpassword.text');
				this.ruleFillpassworderrText = this.$t('password.rules.fillpassword.text');
				this.ruleFilltwopasswordText = this.$t('password.rules.fillpassword.text');
				this.ruleFilltwopassworderrText = this.$t('password.rules.fillpassword.text');
				
				this.updatesuccessText = this.$t('password.updatesuccess.text');
				this.updateerrorText = this.$t('password.updateerror.text');
				this.captchasendText = this.$t('password.captchasend.text');
				this.captchaerrorText = this.$t('password.captchaerror.text');
				this.countdownText = this.$t('password.countdown.text');
				
				this.changeText = this.$t('common.xsin.text');
				this.startText = this.$t('common.getcode.fail');
				this.endText = this.$t('common.reacquire.text');
			},
			submit(){
				let that = this;
				updatePasswordEmail(this.form).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.updatesuccessText,
								type: 'success',
								complete() {
									jwt.logout();
									uni.reLaunch({
										url: '/pages/common/public/login_one'
									});
								}
							})
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: that.updateerrorText,
								content: res.msg,
							});
						}
					});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let that = this;
				if (this.$refs.uCode.canGetCode) {
					sendEmailCode({mail:this.form.mail,scene:4,locale:this.locale}).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.captchasendText,
								type: 'success'
							})
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: that.captchaerrorText,
								content: res.msg,
							});
						}
					});
				} else {
					uni.$u.toast(that.countdownText);
				}
			},
		}
	}
</script>

<style lang="scss">
.goshop-password-container{
	padding: 20rpx;
	.goshop-password-form{
		background-color: $goshop-color-auxiliary-one;
		padding:0 20rpx;
	}
	.goshop-password-footer{
		
	}
}
</style>
